<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onlickfun() {
            var elementById = document.getElementById("abcd");
            var value = elementById.value;
            var cc=/^\w{5,12}$/; //正则表达式判断是否合法
            // ^$是规定开始跟结尾的意思，\w是规定必须是字母数字下划线组成的{}是范围是多少个
            let elementById1 = document.getElementById("namespan");
            if (cc.WebAll.test(value)){
                elementById1.innerHTML = "<img src='right.png' height='18' width='18'>";//这个就是加载span开始和结束标签中间的内容
            }else {
                elementById1.innerHTML = "<img src='wrong.png' height='18' width='18'>";
            }
        }
    </script>
</head>
<body>
    <input type="text" id="abcd" value="">
    <span id="namespan"></span>
    <button  onclick="onlickfun()">提交</button>
</body>
</html>